<template>
				<!-- 问题:我们不知道什么时候能够拿到max的值,但是,总归有一刻,会得到一个真正的max的值 -->
				<!-- 我们可以使用 watch 属性监听,来 监听 父组件传递过来的max值,不管watch会被触发几次,但是,最后一次,肯定是一个合法的max数值 -->
        <div class="mui-numbox" data-numbox-min='1'>
					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					<input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
					<!-- 分析:子组件什么时候把数组传递给父组件 -->
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
export default {
	  mounted () {
	  mui(".mui-numbox").numbox();
  },
  methods: {
	  countChanged(){
		  //每当 文本框的数据被修改的时候,立即把 最新的数据,通过事件调用,传递给父组件
	this.$emit('getcount',parseInt(this.$refs.numbox.value));
	  }
  },
  props: ["max"],
  watch: {
	  //属性监听
	  max: function(newVal,oldVal){
		  //使用js api 设置numbox的最大值
		   mui(".mui-numbox")
		   .numbox()
		   .setOption("max", newVal)
	  }
  },
}
</script>

<style lang="scss" scoped>

</style>
